<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-inner sliding">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
          </a>
        </div>
        <div class="title">Component Page</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block block-strong">
        <p>组件页面也使用Template7或ES模板编译，但它具有更多功能。 除了Template7页面，它还具有生命周期钩子，事件处理，数据管理和虚拟DOM数据绑定。</p>
        <p>当您需要特定于页面的逻辑时，使用“组件”页面很有用。</p>
      </div>
      <image src="./sdfsdf.png"/>
      <div class="block-title">事件绑定</div>
      <div class="block block-strong">
        <a href="#" class="button button-raised" @click="openAlert">弹出提示</a>
      </div>
      <div class="block-title">Page Component Data ${name}</div>
      <div class="block block-strong">
        <p>Hello! My name is {{name}}. I am {{age}} years old.</p>
        <p>I like to play:</p>
        <ul>
          {{#each like}}
          <li>{{this}}</li>
          {{/each}}
        </ul>
      </div>
      <div class="block-title">Route Context</div>
      <div class="block block-strong">
        <p>上下文可以在route options中传递</p>
        <ul>
          <li>foo: {{foo}}</li>
        </ul>
      </div>
      <div class="block-title">Extended Context</div>
      <div class="block block-strong">
        <p>作为Template7页面上下文的组件页面上下文也扩展了一些其他变量。</p>
        <h4>$route</h4>
        <p>Contains properties of the current route:</p>
        <ul style="padding-left:25px;word-wrap:break-word;">
          <li><b>$route.url</b>: {{$route.url}}</li>
          <li><b>$route.path</b>: {{$route.path}}</li>
          <li><b>$route.params</b>: {{js 'return JSON.stringify(this.$route.params)'}}</li>
          <li><b>$route.hash</b>: {{$route.hash}}</li>
          <li><b>$route.query</b>: {{js 'return JSON.stringify(this.$route.query)'}}</li>
          <li><b>$route.context</b>: {{js 'return JSON.stringify(this.$route.context)'}}</li>
        </ul>

        <h4>$root</h4>
        <p>Root data & methods:</p>
        <ul style="padding-left:25px">
          <li><b>$root.user.firstName</b>: {{$root.user.firstName}}</li>
          <li><b>$root.user.lastName</b>: {{$root.user.lastName}}</li>
          <li><a @click="$root.helloWorld()">$root.helloWorld()</a></li>
        </ul>

        <h4>$theme</h4>
        <p>Currently active theme:</p>
        <ul style="padding-left:25px">
          <li><b>$theme.ios</b>: {{$theme.ios}}</li>
          <li><b>$theme.md</b>: {{$theme.md}}</li>
        </ul>
      </div>
      <div class="block-title">Virtual DOM</div>
      <div class="block block-strong">
        <p>组件页面使用Virtual DOM<a href="https://github.com/snabbdom/snabbdom" class="external" target="_blank">snabbdom</a>呈现。 这意味着它可以根据更改的状态自动更新页面布局，只需最少的工作量和最大的性能。</p>
      </div>
      <div class="block block-strong">
        <p>Ok, so your name is <b>{{name}}</b>?</p>
        <div class="input {{#if $theme.md}}margin-bottom{{/if}}">
          <input class="padding-bottom" type="text" @input="onInput" value="{{name}}" placeholder="Type your name">
          <div class="input-info">Type new name and it be dynamically changed</div>
        </div>
      </div>
      <div class="block block-strong">
        <p>Button clicked <b>{{clickCounter}}</b> times</p>
        <p><a class="button button-round button-fill" @click="onButtonClick">Increase Counter</a></p>
      </div>
      {{#if listItems}}
      <div class="list simple-list">
        <ul>
          {{#each listItems}}
          <li>Item {{this}}</li>
          {{/each}}
        </ul>
      </div>
      {{else}}
      <div class="block block-strong text-align-center">
        {{#if listLoading}}
        <div class="preloader"></div>
        {{else}}
        <p><a class="button button-round button-fill" @click="loadList">Load List</a></p>
        {{/if}}
      </div>
      {{/if}}
    </div>
  </div>
</template>
<style scoped>
    .page-content{
        background-color:red;
    }
</style>
<script>
  return {
    // Component Data
    data: function () {
      // Must return an object
      return {
        name: 'Jimmy',
        age: 25,
        like: ['Tennis', 'Chess', 'Football'],
        clickCounter: 0,
        listItems: null,
        listLoading: null,
      }
    },
    // Component Methods
    methods: {
      openAlert: function () {
        var self = this;
        self.$app.dialog.alert('Hello World');
      },
      onInput: function (e) {
        var self = this;
        self.$setState({
          name: e.target.value,
        });
      },
      onButtonClick: function () {
        var self = this;
        self.$setState({
          clickCounter: self.clickCounter + 1
        });
      },
      loadList: function () {
        var self = this;
        self.$setState({ listLoading: true });
        // Emulate Ajax request
        setTimeout(() => {
          self.$setState({
            listLoading: false,
            listItems: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
          });
        }, 2000);
      },
    },
    // Lifecycle Hooks
    beforeCreate() {
      console.log('componentBeforeCreate', this)
    },
    created() {
      console.log('componentCreated', this)
    },
    beforeMount() {
      console.log('componentBeforeMount', this)
    },
    mounted() {
      console.log('componentMounted', this);
    },
    updated() {
      console.log('componentUpdated', this);
    },
    beforeDestroy() {
      console.log('componentBeforeDestroy', this);
    },
    destroyed() {
      console.log('componentDestroyed', this);
    },
    // Page Events
    on: {
      pageMounted: function(e, page) {
        console.log('pageMounted', page);
      },
      pageInit: function(e, page) {
        console.log('pageInit', page);
      },
      pageBeforeIn: function(e, page) {
        console.log('pageBeforeIn', page);
      },
      pageAfterIn: function(e, page) {
        console.log('pageAfterIn', page);
      },
      pageBeforeOut: function(e, page) {
        console.log('pageBeforeOut', page);
      },
      pageAfterOut: function(e, page) {
        console.log('pageAfterOut', page);
      },
      pageBeforeRemove: function(e, page) {
        console.log('pageBeforeRemove', page);
      },
    }
  }
</script>
